<template>
  <div class="info-container">
    <!-- 基本信息 -->
    <div class="flex">
      <div class="text1">基本信息</div>
      <div class="text2">理赔的基本信息</div>
    </div>
    <el-form ref="form" :model="form" label-width="145px" :rules="rules" size="mini" :disabled="isDisable"
      v-loading="loading">
      <div class="link-1">
        <el-form-item label="遗失情况" prop="condition">
          <el-input v-model="form.condition" style="width:85%" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="物品名称" prop="name">
          <el-input v-model="form.name" style="width:85%" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="物品品牌" prop="brand">
          <el-input v-model="form.brand" style="width:85%" maxlength="20"></el-input>
        </el-form-item>
      </div>
      <div class="link-1">
        <el-form-item label="物品类型" prop="type">
          <el-input v-model="form.type" style="width:85%" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="物品特征" prop="trait">
          <el-input v-model="form.trait" style="width:85%" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="物品实际整体价格" prop="cost">
          <el-input v-model="form.cost" style="width:85%" maxlength="20"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <!-- 基本信息 -->
    <!-- 快递与包装信息 -->
    <div class="flex">
      <div class="text1">快递与包装信息</div>
      <div class="text2">需要理赔商品的外包装信息</div>
    </div>
    <el-form ref="form" :model="form" label-width="160px" :rules="rules" size="mini" :disabled="isDisable"
      v-loading="loading">
      <div class="link-1">
        <el-form-item label="寄件时是否当面检查" prop="check">
          <el-radio-group v-model="form.check">
            <el-radio label="已当面检查"></el-radio>
            <el-radio label="未当面检查"></el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="link-1">
        <el-form-item label="外包装材料" prop="mater">
          <el-input v-model="form.mater" style="width:85%" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="外包装特征" prop="charact">
          <el-input v-model="form.charact" style="width:85%" maxlength="20"></el-input>
        </el-form-item>
      </div>
      <div class="link-1" style="width: 50%;">
        <el-form-item label="物品损坏图片/视频" prop="frontImg">
          <div class="block">
            <el-image src=""></el-image>
          </div>
          <!-- <UploadFileVue tip="正面" :value.sync="form.frontImg"></UploadFileVue> -->
        </el-form-item>
        <el-form-item label="有效价值证明" prop="proveImg">
          <!-- <UploadFileVue :value.sync="form.proveImg"></UploadFileVue> -->
          <div class="block">
            <el-image src=""></el-image>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <!-- 快递与包装信息 -->
    <!-- 金额 -->
    <div class="flex">
      <div class="text1">金额</div>
      <div class="text2">需要理赔商品的金额</div>
    </div>
    <el-form ref="form" :model="form" label-width="160px" :rules="rules" size="mini" :disabled="isDisable"
      v-loading="loading">
      <div class="link-1">
        <el-form-item label="价保金额" prop="maincost">
          <el-input v-model="form.maincost" style="width:85%" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="申请理赔金额" prop="pay">
          <el-input v-model="form.pay" style="width:85%" maxlength="20"></el-input>
        </el-form-item>
      </div>
      <div class="link-1">
        <el-form-item label="备注" prop="desc">
          <el-input type="textarea" v-model="form.desc" class="textarea"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <!-- 金额 -->
  </div>
</template>

<script>
import UploadFileVue from '@/components/courtship/UploadFiled';
// import { designAdd } from "@/api/design";
export default {
  props: {
    info: {
      type: Object,
      default: {},
    },
    isDisable: {
      type: Boolean,
      default: true,
    },
    isUpdate: {
      type: Boolean,
      default: false,
    }
  },
  // components: {
  //   UploadFileVue,
  // },
  data() {
    return {
      props: { multiple: false, value: 'cityId', label: 'name', children: 'child', expandTrigger: 'hover' },
      form: {
        condition:'',
        name: '',
        brand:'',
        type:'',
        trait:'',
        cost:'',
        check:'',
        mater:'',
        charact:'',
        maincost:'',
        pay:'',
        desc:'',
        proveImg:''
      },
      loading: false,
      rules: {
        condition: [
          { required: true, message: '遗失情况不能为空！', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '物品名称不能为空！', trigger: 'blur' },
        ],
        brand: [
          { required: true, message: '物品品牌不能为空！', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '物品类型不能为空！', trigger: 'blur' },
        ],
        trait: [
          { required: true, message: '物品特征不能为空！', trigger: 'blur' },
        ],
        cost: [
          { required: true, message: '物品实际整体价格不能为空！', trigger: 'blur' },
        ],
        check: [
          { required: true, message: '不能为空！', trigger: 'blur' },
        ],
        mater: [
          { required: true, message: '外包装材料不能为空！', trigger: 'blur' },
        ],
        charact: [
          { required: true, message: '外包装特征不能为空！', trigger: 'blur' },
        ],
        maincost: [
          { required: true, message: '价保金额不能为空！', trigger: 'blur' },
        ],
        pay: [
          { required: true, message: '申请理赔金额不能为空！', trigger: 'blur' },
        ],
        desc: [
          { required: true, message: '备注不能为空！', trigger: 'blur' },
        ],
        charact: [
          { required: true, message: '外包装特征不能为空！', trigger: 'blur' },
        ],
        frontImg: [
          { required: true, message: '图片/视频不能为空！', trigger: 'blur' },
        ],
        proveImg: [
          { required: true, message: '有效价值证明不能为空！', trigger: 'blur' },
        ],
      },
    }
  },
  watch: {
    info: {
      handler: function (params) {
        this.form = Object.assign({}, this.form, this.info);
        this.$refs.form.resetFields();
      },
    }
  },
  mounted() {
    // this.designAdd();
  },
  methods: {
   
    // 保存草稿
    // saveDraft() {
    //   console.log(this.form);
    // },
    // submitForm(formName) {
    //   this.$refs[formName].validate(async (valid) => {
    //     if (valid) {
    //       if (this.form.address.length === 3) {
    //         this.form.provinceId = this.form.address[0];
    //         this.form.cityId = this.form.address[1];
    //         this.form.districtId = this.form.address[2];
    //       }
    //       this.$emit('complete', this.form);
    //     } else {
    //     }
    //   });
    // }
  }
}
</script>

<style lang="scss" scoped>
.flex{
  display: flex;
  .text1{
    font-size: 16px;
    color: rgba(0, 0, 0, 1);
    padding: 4px 5px 4px 8px;
    margin-bottom: 20px;
    border-left: 4px solid rgba(255, 195, 0, 1);
  }
  .text2{
    font-size: 12px;
    color: rgba(207, 207, 207, 1);
    padding: 4px 5px 0 8px;
  }
}
.info-container {
  padding-left: 30px;
  padding-top: 30px;
  background-color: #fff;
}

.link-1 {
  display: flex;

  .el-form-item {
    flex: 1;
    align:center;
  }
}

.link-2 {
  width: 600px;
  display: flex;
  justify-content: space-between;
}
>>>.el-form-item__label{
  text-align: center;
}
>>>.el-input__inner{
  width: 400px;
}
>>>.el-textarea__inner{
  height: 150px;
}
</style>